<template>
    <div>
        <div class="NewUnitFile" @click="cancel">
            <div v-if="!isChose" class="NewUnitFile-a" @click.stop>
                <div class="title">
                    添加素材
                </div>
                <div>
                    <p @click="isChose = 1">从资源库中添加</p>
                    <p @click="isChose = 2">直接添加</p>
                </div>
            </div>
            <div v-if="isChose===1" class="NewUnitFile-b" @click.stop>
                <div class="title">
                    从资源库添加素材
                </div>

                <div class="resources">
                    <el-scrollbar>
                        <p>当前已选文件: <span v-for="index in selectedList">{{ index.name + '/' }}</span></p>
                        <div v-for="(index,item) in cloud.data">
                            <p @click="isChoseFolder===item?isChoseFolder=-1:isChoseFolder=item">{{ index.name }}</p>
                            <ul v-show="isChoseFolder === item">
                                <li v-for="index_a in index.files">
                                    <button @click="addSelectedList(index_a)"
                                            :class="[selectedList.includes(index_a)?'button-chose':'']"></button>
                                    <span class="name">{{ index_a.name }}</span>
                                </li>
                            </ul>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="button">
                    <button @click="sendSelectedList">添加</button>
                    <button @click="cancel">取消</button>
                </div>
            </div>
            <el-dialog v-if="isChose===2" v-model="isChose" title="上传文件" @click.stop>
                <el-upload
                    class="upload-demo"
                    :action="server.ghyComputerIp+'/cloud/upload'"
                    multiple
                    :data="uploadData"
                    :headers="headers"
                    :drag="true"
                    :before-upload="beforeAvatarUpload"
                    :on-success="handleAvatarSuccess"
                >
                    <button>选择文件</button>
                    <div>点击上方按钮或直接将文件拖入方框中</div>
                    <template #tip>
                        <div class="el-upload__tip">
                            如遇无法上传请压缩为zip , 更多问题请联系我们
                        </div>
                    </template>
                </el-upload>
                <template #footer>
                    <span class="dialog-footer">
                        <button @click="isChose = 0">关闭</button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>

import { reactive, ref } from "vue";
import { useCloudStore } from "@/stores/cloud/cloud";
import { useAllStore } from "@/stores/all";
import workApi from "@/http/work/workApi";
import { useServerStore } from "@/stores/server/server";

const props = defineProps(["setData"]) // 获取传入方法

const all = useAllStore()
const server = useServerStore()
let isChose = ref(0)

// 取消对话框
function cancel() {
    isChose.value = 0
    isChoseFolder.value = -1
    selectedList = reactive([])
    all.setDialog("")
}

// "从资源库中获取" 模块
const cloud = useCloudStore() // 获取资源库数据
cloud.setData()
let isChoseFolder = ref(-1)

let selectedList = reactive([]) // 待添加列表
function addSelectedList(value) {
    for (let i = 0; i < selectedList.length; i++) {
        if (value === selectedList[i]) {
            console.log("删除第", i, "项")
            selectedList.splice(i, 1)
            return
        }
    }
    selectedList.push(value)
}


// 发送按钮
function sendSelectedList() {
    workApi.post("teacher/unit_file", {
        subject_name: all.courseContainerInfo.name,
        unitName: all.courseContainerInfo.unitName,
        file: selectedList
    }).then((res) => {
        props.setData(res.data[0].unit)
        cancel()
    })
}

// 直接上传文件的请求头添加token

const headers = {
    "token": localStorage.getItem('token')
}
const uploadData = {
    folder: all.courseContainerInfo.name
}

function beforeAvatarUpload() { // 发送文件前的钩子 创建一个文件夹
    workApi.post("cloud/new", {
        name: all.courseContainerInfo.name,
    })
}

function handleAvatarSuccess(res) {  // 上传成功后的钩子
    selectedList.push(res.data)
    sendSelectedList()
}
</script>

<style scoped lang="less">
.NewUnitFile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    color: black;
    background-color: rgba(0, 0, 0, .6);
    backdrop-filter: blur(2px);
    z-index: 1;

    > div {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 300px;
        border-radius: 20px;
        background-color: white;

        .title {
            height: 40px;
            margin-bottom: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            font-weight: 600;
            border-bottom: 1px solid black;
        }
    }

    .NewUnitFile-a {
        width: 18%;
        height: 180px;

        div:nth-child(2) {
            display: flex;
            justify-content: space-around;

            p {
                width: 130px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                border-radius: 10px;
                background-color: #e5e5e5;
                color: #9ba8c5;
                transition: 0.2s;

                &:hover {
                    color: black;
                    background-color: #4f95f5;
                }
            }

        }
    }

    .NewUnitFile-b {
        width: 80vw;
        height: 80vh;

        .resources {
            height: 70%;
            margin-bottom: 30px;
            //background-color: pink;

            div {
                > p {
                    height: 50px;
                    line-height: 50px;
                    padding: 0 50px;
                }

                > ul {
                    padding: 0 50px;

                    > li {
                        height: 50px;
                        line-height: 50px;

                        button {
                            width: 20px;
                            height: 20px;
                            margin-right: 30px;
                            background-color: #e5e5e5;
                        }

                        .button-chose {
                            background-color: #4f95f5;
                        }
                    }
                }
            }
        }

        .button {
            display: flex;
            justify-content: space-evenly;

            button {
                height: 80px;
                width: 150px;
                border-radius: 15px;

                &:nth-child(1) {
                    background-color: #4f95f5;
                }

                &:nth-child(2) {
                    background-color: #e5e5e5;
                }
            }
        }
    }
}

</style>